<template>
  <view class="mine-container">
    <view
      class="mine-top-banner"
      :style="topStyle">
      <view
        class="mine-top-banner-title"
        :style="titleStyle">
        我的
      </view>
      <view class="mine-top-banner-info">
        <view class="head">
          <image mode="scaleToFill" />
        </view>
        <view class="info">
          <view class="name">昵称</view>
          <view class="position">职位</view>
        </view>
      </view>
    </view>
    <view class="menu-list">
      <view class="menu-item">
        <view class="context">所属机构</view>
        <view class="right"></view>
      </view>
      <view class="menu-item">
        <view class="context">联系电话</view>
        <view class="right"></view>
      </view>
      <view class="menu-item">
        <view class="context">电子邮箱</view>
        <view class="right"></view>
      </view>
    </view>
    <view class="actions">
      <button
        type="warn"
        @click="onLogout">
        退出登录
      </button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { useCustomNavigationStore } from "@/store/customNavigationStore";
import { computed, toRefs } from "@vue/reactivity";
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { storeToRefs } from "pinia";
import http from "@/util/http";
import defaultHead from "@/static/default_head.png";

// 自定义标题栏样式处理
let customNavigationStore = useCustomNavigationStore();
const { statusBar, customBar } = toRefs(customNavigationStore);
let topStyle = computed(() => {
  return `padding-top: ${statusBar.value}px;`;
});
let titleStyle = computed(() => {
  const height = customBar.value - statusBar.value;
  return `height: ${height}px;line-height: ${height}px;`;
});

let deptName = ref("");

const logoutLoading = ref(false);
function onLogout() {
  uni.reLaunch({ url: "/pages/login/login" });
}

onShow(() => {});
</script>
<style lang="scss">
page,
.mine-container {
  height: 100%;
}

.mine-container {
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  .mine-top-banner {
    width: 100%;
    height: 492upx;
    background-image: url(@/static/mine_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    position: relative;

    > view {
      position: relative;
      z-index: 1;
    }

    .mine-top-banner-title {
      text-align: center;
      font-size: 48upx;
      color: #000;
    }

    .mine-top-banner-info {
      padding: 24upx 40upx 114upx;
      display: flex;

      .head {
        width: 128upx;
        height: 128upx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 40upx;
        image {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        flex: 1;

        .name {
          font-size: 36upx;
          line-height: 50upx;
          margin-bottom: 20upx;
        }

        .position {
          display: inline-block;
          background-image: linear-gradient(135deg, #f5a623 0%, #f8e71c 100%);
          border-radius: 22px;
          height: 44upx;
          line-height: 44upx;
          padding: 0 34upx;
          font-size: 24upx;
          margin-right: 20upx;
          margin-bottom: 10upx;
        }
      }
    }

    &::after {
      content: " ";
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 32upx;
      background-color: #f5f5f5;
      border-radius: 32upx 32upx 0 0;
    }
  }

  .menu-list {
    flex: 1;

    .menu-item {
      display: flex;
      height: 110upx;
      line-height: 110upx;
      background-color: #fff;
      padding: 0 40upx;
      margin-bottom: 16upx;
      font-size: 30upx;

      .context {
        flex: 1;
        color: #171930;
      }

      .right {
        color: #686978;
      }
    }
  }

  .actions {
    padding: 40upx;

    button {
      margin-bottom: 16upx;
    }
  }
}
</style>
